<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>维护跟车人信息</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
</head>
<body>
<form class="layui-form">
	<div class="layui-row">
		<div class="span12">
			<table>
				<tr>
					<td>
						姓名:
					</td>
					<td>
						<input type="text" id="receiveName" class="layui-input"/>
					</td>
					<td>
						手机号:
					</td>
					<td>
						<input type="text" id="receivePhone" class="layui-input" />
					</td>
					<td >
						<button type="button" id="addBtn" class="layui-btn layui-btn-normal">增加</button>
					</td>
				</tr>
			</table>
		</div>
	</div>
</form>
		<div class="span12">
			<table id="financeTable" lay-filter="financeTable"></table>
		</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.all.js"></script>
<script>
var ctx = "${pageContext.request.contextPath}";
var userInfo = eval(${userInfoCustom});
var layer = layui.layer;
var form = layui.form;
var laytable = layui.table;
$(function(){
	var tableIns = laytable.render({
	    elem: '#financeTable'
	    ,url: ctx+'/pwd/findByUserIdAndPage' //数据接口
	    ,height:350
	    ,where: {
	    	userId: userInfo.userId
	    }//参数
	    ,page: true //开启分页
	    ,cols: [[ //表头//已经使用使用灰色条纹
	      {field: 'receiveName', title: '姓名',templet: function(d){
	          return d.receiveName;
	      }  }
	      ,{field: 'receivePhone', title: '手机号',templet: function(d){
	          return d.receivePhone;
	      } } ,
	      {field: '', title: '操作',templet: function(d){
	          return "<button type='button' class='layui-btn layui-btn-sm layui-btn-normal' onClick='deleteByReceiveId("+d.receiveId+")'>删除</button>";
	      } }
	    ]]
	  });
	
	$("#addBtn").on("click",function(){
		$.ajax({
			  type: 'POST',
			  url: ctx+"/receive/saveReceive",
			  data: {
				  userId:userInfo.userId,
				  receiveName:$("#receiveName").val(),
				  receivePhone:$("#receivePhone").val()
			  },
			  success: function(data,status){
				   if(data){
					   if(data.state==1){
						   layer.msg("添加成功", {
								time: 5000, //20s后自动关闭
						        btn: ['确定']
						      });
						   tableIns.reload();
					   }else{
						   layer.msg(data.msg);
					   }
				   }
			  }
			});
	});
});

function deleteByReceiveId(receiveId){
	$.ajax({
		  type: 'POST',
		  url: ctx+"/receive/deleteReceivePhone",
		  data: {
			  receiveId:receiveId
		  },
		  success: function(data,status){
			   if(data){
				   if(data.state==1){
					   layer.msg("删除成功", {
							time: 3000, //20s后自动关闭
					        btn: ['确定']
					      });
					   laytable.reload('financeTable',{} );
				   }else{
					   layer.msg("系统异常!");
				   }
			   }
		  }
		});
}


</script>
</html>